import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Select, Table, DatePicker, Row } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getOrderList, getSupplierList, getStoreList, getPOSList } from '@/services/order/offline'
import { router } from 'umi'
import { exportsExcel } from '@/utils/utils'

const { Option } = Select

const { RangePicker } = DatePicker

// 表头
const columns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    align: 'center',
  },
  {
    title: '购买人',
    dataIndex: 'userName',
    key: 'userName',
    align: 'center'
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime',
    key: 'orderTime',
    align: 'center'
  },
  {
    title: '门店名称',
    dataIndex: 'storeName',
    key: 'storeName',
    align: 'center'
  },
  // {
  //   title: '订单金额',
  //   dataIndex: 'actualPrice',
  //   key: 'actualPrice',
  //   align: 'center'
  // },
  {
    title: '支付方式',
    dataIndex: 'payTypeName',
    key: 'payTypeName',
    align: 'center'
  },
  {
    title: '订单来源',
    dataIndex: 'platFormName',
    key: 'platFormName',
    align: 'center'
  },
  {
    title: '支付场景',
    dataIndex: 'orderPaySceneName',
    key: 'orderPaySceneName',
    align: 'center'
  },
  {
    title: '支付标记',
    dataIndex: 'tradeTypeName',
    key: 'tradeTypeName',
    align: 'center'
  },
  {
    title: 'posSn',
    dataIndex: 'posSn',
    key: 'posSn',
    align: 'center'
  },
  {
    title: '原价',
    dataIndex: 'originalPrice',
    key: 'originalPrice',
    align: 'center'
  },
  {
    title: '优惠金额',
    dataIndex: 'transFee',
    key: 'transFee',
    align: 'center'
  },
  {
    title: '实付金额',
    dataIndex: 'actualPrice',
    key: 'actualPrice',
    align: 'center'
  },
  {
    title: '支付状态',
    dataIndex: 'payStatusName',
    key: 'payStatusName',
    align: 'center'
  },
  {
    title: '员工编号',
    dataIndex: 'employerNo',
    key: 'employerNo',
    align: 'center'
  },
  {
    title: '员工名称',
    dataIndex: 'employerName',
    key: 'employerName',
    align: 'center'
  }
]

const Offline = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [orderList, setOrderList] = useState([])
  const [supplierList, setSupplierList] = useState([])
  const [storeList, setStoreList] = useState([])
  const [POSList, setPOSList] = useState([])
  const [osTypeList, setOsTypeList] = useState([
    {
      id: 'Windows',
      name: 'WIN PC'
    },
    {
      id: 'IOS',
      name: 'IOS'
    },
    {
      id: 'Android',
      name: '安卓'
    },
    {
      id: 'WP',
      name: 'Window Phone'
    },
    {
      id: 'OTHER',
      name: '其他'
    }
  ])
  const [platFormList, setPlatFormList] = useState([
    {
      id: 'POS',
      name: 'POS机'
    },
    {
      id: 'APP',
      name: 'APP'
    },
    {
      id: 'PC',
      name: 'PC'
    },
    {
      id: 'WECHAT_MICROSOFT',
      name: '微信小程序'
    },
    {
      id: 'WECHAT_PUB',
      name: '微信公众号'
    },
    {
      id: 'ZFB_MICROSOFT',
      name: '支付宝小程序'
    },
    {
      id: 'ZFB_PUB',
      name: '支付宝生活号'
    },
    {
      id: 'EXTERNAL_API',
      name: '外部API'
    }
  ])
  const [orderTypeList, setOrderTypeList] = useState([
    {
      id: 'GENERAL_ORDER',
      name: '普通买单订单'
    },
    {
      id: 'MALL_ORDER',
      name: '商城订单'
    },
    {
      id: 'RECHAR_ORDER',
      name: '充值订单'
    },
    {
      id: 'GROUP_PURCHASE_ORDER',
      name: '团购订单'
    },
    {
      id: 'PRESELL_ORDER',
      name: '预售订单'
    },
    {
      id: 'REPAST_ORDER',
      name: '餐饮订单'
    },
    {
      id: 'SUPER_MARKET_ORDER',
      name: '商超订单'
    },
    {
      id: 'EXTERNAL_API',
      name: '外部API'
    }
  ])
  const [orderPaySceneList, setOrderPaySceneList] = useState([
    {
      id: 'CASHIER',
      name: '普通收银'
    },
    {
      id: 'COUNTER_CASHIER',
      name: '单柜收银'
    },
    {
      id: 'EMPLOYER_CASHIER',
      name: '员工收银'
    },
    {
      id: 'MALL_CASHIER',
      name: '线上商城'
    },
    {
      id: 'TAB_CARD_CASHIER',
      name: '台卡收款'
    },
    {
      id: 'MEMBER_RECHARGE',
      name: '会员卡充值'
    },
    {
      id: 'PAID_GOLD_RECHARGE',
      name: '代付金充值'
    },
    {
      id: 'SMS_RECHARGE',
      name: '短信充值'
    },
    {
      id: 'LIVE_ORDER',
      name: '直播订单'
    },
    {
      id: 'ADVERTORIAL_ORDER',
      name: '软文订单'
    },
    {
      id: 'SCANQRCODE_CASHIER',
      name: '扫描点单'
    },
    {
      id: 'SECKILL_ORDER',
      name: '秒杀订单'
    },
    {
      id: 'GROUP_PURCHASE_ORDER',
      name: '拼团订单'
    }
  ])
  const [payStatusList, setPayStatusList] = useState([
    {
      id: '6',
      name: '付款成功'
    },
    {
      id: '1',
      name: '待支付'
    },
    {
      id: '2',
      name: '支付中'
    },
    {
      id: '3',
      name: '支付取消'
    },
    {
      id: '4',
      name: '支付失败'
    },
    {
      id: '5',
      name: '部分付款成功'
    },
    {
      id: '10',
      name: '退款中'
    },
    {
      id: '20',
      name: '退款成功'
    },
    {
      id: '30',
      name: '退款失败'
    }
  ])
  const [payTypeList, setPayTypeList] = useState([
    {
      id: 'WXP',
      name: '微信支付'
    },
    {
      id: 'ALP',
      name: '支付宝支付'
    },
    {
      id: 'Bank',
      name: '银行卡支付'
    },
    {
      id: 'Cash',
      name: '现金支付'
    },
    {
      id: 'Member',
      name: '会员卡支付'
    },
    {
      id: 'Account',
      name: '余额支付'
    },
    {
      id: 'Coupon',
      name: '优惠支付'
    }
  ])
  const [tradeTypeList, setTradeTypeList] = useState([
    {
      id: 'NATIVE',
      name: '扫码支付'
    },
    {
      id: 'BARCODE',
      name: '条码支付'
    },
    {
      id: 'JSAPI',
      name: 'JSAPI'
    }
  ])
  const [orderStartTime, setOrderStartTime] = useState('')
  const [orderEndTime, setOrderEndTime] = useState('')

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getSupplierLists()
    await getPOSLists()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        supplierId: values.supplierId,
        storeId: values.storeId,
        posSn: values.posSn,
        orderNo: values.orderNo,
        goodsName: values.goodsName,
        osType: values.osType,
        platForm: values.platForm,
        orderType: values.orderType,
        orderPayScene: values.orderPayScene,
        payStatus: values.payStatus,
        payType: values.payType,
        tradeType: values.tradeType,
        orderStartTime,
        orderEndTime,
        pageNo,
        pageSize
      }
      await getOrderLists(params)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="所属商户" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('supplierId', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
                onChange={getStoreLists}
              >
                { supplierList && supplierList.map(r => <Option key={r.id} value={r.id}>{r.merchantName}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="门店" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('storeId', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { storeList && storeList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="POS机" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('posSn', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { POSList && POSList.map(r => <Option key={r.id} value={r.id}>{r.posName}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="订单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('orderNo', {})
              (<Input placeholder="请输入订单号" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="商品名" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('goodsName', {})
              (<Input placeholder="请输入商品名" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="操作系统" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('osType', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { osTypeList && osTypeList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="平台来源" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('platForm', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { platFormList && platFormList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="订单类目" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('orderType', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { orderTypeList && orderTypeList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="支付场景" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('orderPayScene', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { orderPaySceneList && orderPaySceneList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="付款状态" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('payStatus', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { payStatusList && payStatusList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="支付方式" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('payType', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { payTypeList && payTypeList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="支付标记" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('tradeType', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { tradeTypeList && tradeTypeList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="下单时间" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('date', {})
              (<RangePicker onChange={selectData} />)}
          </Form.Item>
        </Col>
      </Row>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 13:
        if (JSON.stringify(record) == "{}") return
        router.push({ pathname: '/order/orderDetail', query: { orderNo: record[0].orderNo, orderType: 'offline' } });
        break
      // 导出excel
      case 97:
        exportsExcel({
          columns,
          data: orderList,
          title: '线下订单'
        })
        break
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      let params = {
        pageNo: page,
        pageSize,
        orderByCondition
      }
      getUserLists(params)
    }
  }
  // 获取商户列表
  const getSupplierLists = async () => {
    let res = await getSupplierList()
    if (res.code === '0') {
      setSupplierList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取店铺列表
  const getStoreLists = async (id) => {
    let params = {
      pageSize: 9999,
      supplierId: id
    }
    let res = await getStoreList(params)
    if (res.code === '0') {
      setStoreList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取POS列表
  const getPOSLists = async () => {
    let res = await getPOSList()
    if (res.code === '0') {
      setPOSList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 选择时间
  const selectData = (date, dateString) => {
    setOrderStartTime(dateString[0])
    setOrderEndTime(dateString[1])
  }
  // 获取订单列表
  const getOrderLists = async (params) => {
    let res = await getOrderList(params)
    if (res.code === '0') {
      setOrderList(res.data)
      setTotal(res.iTotalRecords)
    } else {
      alert(res.msg)
    }
  }
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={orderList}
        rowKey={record => record.id}
        pagination={pagination}
        rowSelection={rowSelection}
      />
   </PageHeaderWrapper>
  )
}

export default Form.create()(Offline)
